<template>
	<a-modal v-bind="options" class="import-records-dialog">
		<vxe-grid ref="grid" v-bind="gridOptions" class="energy">
			<template #toolbar>
				<vxe-toolbar>
					<template #buttons>
						<div class="toolbar-action">
							导入门店：
							<a-select v-model:value="defaultParams.storeId" class="select-width" @change="changeSelect" placeholder="请选择门店" allowClear :options="storeOptions" :field-names="{label: 'name', value: 'id'}"></a-select>
						</div>

						<div class="toolbar-action">
							导入时间：
							<a-range-picker :value="[defaultParams.createStartTime, defaultParams.createEndTime]" :value-format="DATE_FORMAT.DATE" style="flex: 1" @change="onDateChange" />
						</div>
					</template>
				</vxe-toolbar>
			</template>

			<template #action="{row}">
				<a-button type="link" @click="viewData(row)">查看导入数据</a-button>
			</template>
		</vxe-grid>
	</a-modal>

	<import-data-dialog v-model:visible="visibles.data" :id="store.id" :data="store.data" />
</template>

<script lang="ts" setup>
	import {watchEffect, toRef, reactive, ref, watch} from 'vue'
	import {VxeGridInstance, VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import DATE_FORMAT from 'yuxin-base/src/utils/date'
	import billApi from '@/api/bill-api'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import ImportDataDialog from '@/components/finance/dialog/import-data-dialog.vue'

	const props = defineProps<{
		visible: boolean
	}>()

	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		title: '导入记录',
		width: 1100,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		footer: false,
		bodyStyle: {padding: '15px'},
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const defaultParams = reactive<any>({
		// 门店名称
		storeName: null,
		// 导入时间
		createStartTime: null,
		createEndTime: null
	})

	const storeOptions = ref<any>([])

	const visibles = reactive({
		data: false
	})

	const store = reactive<any>({
		id: null,
		data: {}
	})

	// 表头
	const grid = ref<VxeGridInstance>()
	const gridOptions = reactive<VxeGridProps>({
		height: 'auto',
		showOverflow: true,
		rowConfig: {
			height: 60,
			isHover: true
		},
		columns: [
			{
				title: '导入时间',
				minWidth: 150,
				fixed: 'left',
				align: 'left',
				field: 'createTime'
			},
			{
				title: '导入门店',
				minWidth: 150,
				align: 'left',
				field: 'storeName'
			},
			{
				title: '导入人员',
				minWidth: 100,
				align: 'left',
				field: 'createName'
			},
			{
				title: '人员所属部门',
				minWidth: 100,
				align: 'left',
				field: 'deptName'
			},
			{
				title: '导入数据',
				minWidth: 100,
				fixed: 'right',
				align: 'center',
				slots: {
					default: 'action'
				}
			}
		],
		pagerConfig: pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					return billApi.eneryPage({...defaultParams, type: 1, current, size})
				}
			}
		}
	})

	const getList = (page?: any) => {
		grid.value?.commitProxy(page === 1 ? 'reload' : 'query')
	}

	const initSelect = () => {
		settingApi.getDeptStoreList().then((res: any) => {
			storeOptions.value = res.data
		})
	}

	const changeSelect = () => {
		if (defaultParams.storeId) {
			let index = storeOptions.value.findIndex((o: any) => o.id === defaultParams.storeId)
			defaultParams.storeName = storeOptions.value[index].name
		} else {
			defaultParams.storeName = ''
		}

		getList(1)
	}

	const onDateChange = (dates: string[]) => {
		console.log(dates)
		dates = dates || []
		defaultParams.createStartTime = dates[0]
		defaultParams.createEndTime = dates[1]
		getList(1)
	}

	const viewData = (row: any) => {
		console.log('viewData---row===', row)
		store.id = row.id
		store.data.createTime = row.createTime
		store.data.storeName = row.storeName
		store.data.createName = row.createName
		store.data.deptName = row.deptName
		visibles.data = true
	}

	watchEffect(() => {
		if (props.visible) {
			defaultParams.storeName = null
			defaultParams.createStartTime = null
			defaultParams.createEndTime = null

			initSelect()
		}
	})
</script>

<style lang="less">
	.import-records-dialog {
		.ant-modal-body {
			overflow: auto;
			min-height: 600px;
			max-height: 900px;
			height: calc(100vh - 150px);
		}

		.vxe-toolbar {
			padding: 5px 0 20px;
		}

		.toolbar-action {
			color: #86909cff;
			margin-right: 18px;
		}

		.select-width {
			width: 275px;
		}
	}
</style>
